<script setup lang="ts">
import TheClock from '@/components/clock/TheClock.vue'
import { onUnmounted, ref } from 'vue';

// 声明时间变量
let hour = ref<number>(0)
let minute = ref<number>(0)
let second = ref<number>(0)

// 初始化选择器数据
let oHour = ref<number>(0)
let oMinute = ref<number>(0)
let oSecond = ref<number>(0)

// 计算时间数值
const countTime = () => {
  second.value++
  if (second.value < 60) return
  second.value = 0
  minute.value++
  if (minute.value < 60) return
  minute.value = 0
  hour.value++
  if (hour.value < 24) return
  hour.value = 0
}

// 创建时间函数
let timer: any = null
const setTimer = () => {
  clearInterval(timer)

  hour.value = Number(oHour.value)
  minute.value = Number(oMinute.value)
  second.value = Number(oSecond.value)

  timer = setInterval(() => {
    countTime()
  }, 1000)
}

onUnmounted((): void => {
  clearInterval(timer)
})

// 设置时间选择区间
let h = 0
let m = 0
let s = 0
const HOURES = new Array(24).fill(0).map(() => h++)
const MINUTES = new Array(60).fill(0).map(() => m++)
const SECONDS = new Array(60).fill(0).map(() => s++)

</script>

<template>
  <div class="main_box">
    <!-- 设置时间 -->
    <div class="settime_box">

      <el-row :gutter="10" justify="space-between">
        <el-col :span="8">
          <el-select v-model="oHour" placeholder="时">
            <el-option v-for="item in HOURES" :key="item" :label="item" :value="item" />
          </el-select>
        </el-col>

        <el-col :span="8">
          <el-select v-model="oMinute" placeholder="分">
            <el-option v-for="item in MINUTES" :key="item" :label="item" :value="item" />
          </el-select>
        </el-col>

        <el-col :span="8">
          <el-select v-model="oSecond" placeholder="秒">
            <el-option v-for="item in SECONDS" :key="item" :label="item" :value="item" />
          </el-select>
        </el-col>
      </el-row>

      <el-row justify="space-between">
        <el-col :span="12" class="flex">
          <el-button>重置</el-button>
        </el-col>
        <el-col :span="12" class="flex">
          <el-button type="success" @click="setTimer">确定</el-button>
        </el-col>
      </el-row>
    </div>

    <main>
      <div class="clock_clockwise">
        <TheClock width="320rem" height="300rem" :time="hour" />
      </div>

      <div class="minute-second_hand">
        <div class="clock_minute_hand">
          <TheClock width="160rem" height="140rem" :time="minute" />
        </div>
        <div class="clock_second_hand">
          <TheClock width="160rem" height="140rem" :time="second" />
        </div>
      </div>
    </main>
  </div>
</template>

<style lang='scss' scoped>
.main_box {

  .settime_box {
    position: fixed;
    left: 20rem;
    top: 20rem;
    width: 80rem;

    .el-col {
      margin-bottom: 8rem;
    }
  }

}

main {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;

  .clock_clockwise {
    margin-right: 20rem;

  }

  .minute-second_hand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .clock_minute_hand {
      margin-bottom: 20rem;
    }
  }
}
</style>